<template>
	<view class="content">
		<view class="title">{{originIndex +1 }}/{{ originList.length }}</view>
		<swiper class="swiper" circular @change="swiperChange" swiperDuration="250">
			<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
				<view class="wrap_content">{{ item.have }} </view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				originList: [], // 源数据
				displaySwiperList: [], // swiper需要的数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				currentPage: 0,
				pageSize: 10,
				count: 1300,
			};
		},
		methods: {
			/**
			 * 初始一个显示的swiper数据
			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
			 */
			setSwiperData(originIndex = this.originIndex) {
				const originListLength = this.originList.length; // 源数据长度
				const displayList = [];
				displayList[this.displayIndex] = this.originList[originIndex];
				displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
					this.originList[
						originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
					];
				displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
					this.originList[
						originIndex + 1 == originListLength ? 0 : originIndex + 1
					];
				this.displaySwiperList = displayList;
			},
			/**
			 * swiper滑动时候
			 */
			swiperChange(event) {
				const {
					current
				} = event.detail;
				const originListLength = this.originList.length; // 源数据长度
				// =============向后==========
				if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
					this.originIndex =
						this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
					this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
					this.getSwiperData(this.originIndex);
				}
				// ======如果两者的差为-2或者1则是向前滑动============
				else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
					this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
					this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
					this.getSwiperData(this.originIndex);
				}
			},
			getSwiperData(originIndex = this.originIndex) {
				if (this.originList.length < this.count) {
					for (let i = 124; i < this.count; i++) {
						let item = {
							have: 0
						}
						this.originList.push(item);
					}
				}
				let item = this.originList[originIndex];
				console.log(originIndex, item.have);

				if (item.have == 0) {
					console.log("originIndex" + originIndex);
					this.currentPage = parseInt(originIndex / this.pageSize)
					console.log("currentPage" + this.currentPage);
					for (let i = 0; i < 10; i++) {
						this.originList[i + this.currentPage * this.pageSize].have = 1;
					}
					this.setSwiperData();
				}
			}
		},
		created() {
			// for (let i = 1; i <= 1300; i++) {
			// 	this.originList.push(i);
			// }
			this.originIndex = 124;
			for (let i = 0; i < this.originIndex; i++) {
				let item = {
					have: 0
				}
				this.originList.push(item);
			}

			this.getSwiperData();
		},
	};
</script>

<style>
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
	}

	.swiper {
		height: calc(100vh - 120rpx);
	}

	.wrap_content {
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: gray;
		height: 100vh;
		color: aqua;
		font-size: 80px;
		margin: 0rpx 40rpx;
	}
</style>